<template>
  <div class="at-info">
    <div class="at-info-header" v-if="title || $slots.title">
      <div class="at-info-title">
        <slot name="title">{{ title }}</slot>
      </div>
      <div class="at-info-extra">
        <slot name="extra"></slot>
      </div>
    </div>
    <div class="at-info-body" v-if="$slots.default">
      <!-- <template v-if="modelValue && jsonList">
        <at-info-item v-for="(item, index) in jsonList" :key="index" :label="item.label">
          <template v-if="$slots[item.name]">
            <slot :name="item.name"></slot>
          </template>
          <template v-else>{{ item.value || modelValue[item.name] }}</template>
        </at-info-item>
      </template> -->
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { provide, computed } from 'vue'

const props = defineProps({
  modelValue: null, // 表单数据v-model
  json: { type: Array, default: () => [] }, // 表单结构
  title: { type: String }, // 标题
  labelWidth: { default: '100px' }, // 标签宽度
  column: { type: Number, default: 1 }, // 一行 info-item 的数量
  labelPosition: { type: String, default: 'left' },
})

const columnWidth = computed(() => {
  return `${100 / props.column}%`
})

provide('at-ui/components/Info', {
  columnWidth: columnWidth.value,
  labelWidth: props.labelWidth,
  labelPosition: props.labelPosition,
})
</script>

<style lang="scss" scoped>
.at-info {
  margin-bottom: 15px;
  &:last-child {
    margin-bottom: 0;
  }
}

.at-info-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--gutter-s);
}

.at-info-title {
  font-size: 16px;
  color: #000;
  flex: 1;
}

.at-info-body {
  display: flex;
  flex-wrap: wrap;
}
</style>
